<script>

export default {
  components: {
    FullEnergyOnlineWatch: () => import("@/components/modules/modules/full-energy-online-watch.vue"),
    FullEnergyYearTrend: () => import("@/components/modules/modules/full-energy-year-trend.vue"),
    FullWarningList: () => import("@/components/modules/modules/full-warning-list.vue"),
    FullInfoWatch: () => import("@/components/modules/modules/full-info-watch.vue"),
    FullBuildingRank: () => import("@/components/modules/modules/full-building-rank.vue")
  },
  data() {
    return {
      date: {
        day: '',
        week: '',
        time: '',
        weekInfo: {
          "0": '星期天',
          "1": '星期一',
          "2": '星期二',
          "3": '星期三',
          "4": '星期四',
          "5": '星期五',
          "6": '星期六'
        }
      }
    }
  },
  mounted() {
    this.resetChartBodySize();
    window.addEventListener('resize', this.resetChartBodySize);
    setInterval(() => {
      this.refreshTime()
    }, 1000)
  },
  methods: {
    resetChartBodySize: function () {
      const h = window.innerHeight;
      const chartBodyHeight = h - (350 + 40);
      this.$refs["chart-body"].style['height'] = chartBodyHeight + 'px';
    },
    refreshTime: function () {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1; // 月份是从0开始的，所以需要+1
      const day = now.getDate();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();
      const weekday = now.getDay();
      this.date.day = year + '.' + this.timeLessTen(month) + '.' + this.timeLessTen(day)
      this.date.time = this.timeLessTen(hours) + ':' + this.timeLessTen(minutes) + ':' + this.timeLessTen(seconds);
      this.date.week = this.date.weekInfo['' + weekday + ''];

    },
    timeLessTen: function (v) {
      if (v <= 9) {
        return '0' + v;
      }
      return v;
    }
  }
}
</script>

<template>
  <div style="width: 100%;height: 100%;background-color: rgba(33,39,54,0.7);position: fixed;top: 0;left: 0;color: white;">
    <div style="height: 80px;">
      <div style="text-align: center;font-size: 40px;line-height: 80px;font-weight: bold;">
        能耗数据系统平台
      </div>
      <div style="position: relative;width: 400px;height: 30px;float: left;left: 30px;top: -60px;line-height: 30px;">
        <i style="font-size: 20px;font-style: normal;">{{ date.day }}</i>
        <i style="font-size: 20px;margin-left: 20px;font-style: normal;">{{ date.week }}</i>
        <i style="margin-left: 20px;font-style: normal;margin-right: 50px;">{{ date.time }}</i>
      </div>
    </div>
    <div ref="chart-body" style="overflow: hidden;width: 100%;">
      <div style="height: 100%;width: 600px;float: left;left: 0;">
        <FullInfoWatch/>
        <FullEnergyOnlineWatch/>
      </div>
      <div style="height: 100%;width: 600px;float: right;right: 0;">
        <FullBuildingRank/>
        <FullWarningList/>
      </div>
    </div>
    <div style="height: 350px;position: fixed;float: left;width: 100%;bottom: 20px;">
      <FullEnergyYearTrend/>
    </div>
  </div>
</template>

<style>

</style>
